<template>
  <div class="article-page">
    <div class="all">
      <div class="a2">
        <div class="am-flexbox search am-flexbox-align-center">
          <div @click="goinCity" class="atress">{{city || '北京'}} <van-icon name="arrow-down" /></div>
          <span>|</span>
          <van-icon name="search" />
          <input type="text" placeholder="请输入小区或者地址" />
        <van-icon @click="$router.push('/map')" name="location-o" size="20" />
        </div>
      </div>
      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
     <van-grid class="mt20" :column-num="4">
      <van-grid-item icon="star-o" text="我的收藏" @click="goinFn" />
      <van-grid-item icon="send-gift-o" text="我的出租" />
      <van-grid-item icon="service-o" text="看房记录" />
      <van-grid-item icon="notes-o" text="找房子了" @click="goinSearch" />

    </van-grid>
  </div>
</template>

<script>
import { getToken } from '@/utils/storage'

export default {
  name: 'article-page',
  // created () {
  //   console.log(this.$route.query.data)
  // },
  computed: {
    city () {
      return this.$route.query.data
    }
  },
  data () {
    return {
      images: [
        'https://img0.baidu.com/it/u=1004826003,3453795398&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360',
        'https://img1.baidu.com/it/u=4263315613,303539683&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        'https://img0.baidu.com/it/u=897222035,2090345392&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        'https://img2.baidu.com/it/u=1417032950,3341548542&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
      ]
    }
  },
  methods: {
    goinCity () {
      if (getToken()) {
        this.$router.push('/city')
      } else {
        this.$toast.fail('还没登陆呢宝贝')
        this.$router.push('/login')
      }
    },
    goinSearch () {
      if (getToken()) {
        this.$router.push('/search')
      } else {
        this.$toast.fail('还没登陆呢宝贝')
        this.$router.push('/login')
      }
    },
    goinFn () {
      if (getToken()) {
        this.$router.push('/collect')
      } else {
        this.$toast.fail('还没登陆呢宝贝')
        this.$router.push('/login')
      }
    }

  }
}
</script>

<style lang="less" scoped>
.mt20 {
  margin-top: 20px;
  box-shadow: 0 2px 2px #bdbdbd;

}
.a1 {
  display:inline-block;
  // position: absolute;
  padding-right: 40px;
  font-size: 20px;
  // color: #fff;
  z-index: 2;
}
input {
  border: none;
}
span {
  padding-right: 10px;
}
.atress {
  padding-right: 10px;
}
.am-flexbox {
  display: flex;

  // overflow: hidden;
  align-items: center;
  height: 34px;
  margin: 0 10px 0 10px;
  border-radius: 3px;
  background-color: #fff;
  position: absolute;
  top: 25px;
  width: 80%;
  padding: 0 10px;
  z-index: 2;
  opacity: 0.6;
}
img {
  vertical-align: top;
  height: 220px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
